<template>
  <div class="vipInfo-container vipBack">
      <ul class="clearfix">
        <li>
          <div>修改头像</div>
          <div>
            <span class="profile"></span>
          </div>
        </li>
        <li>
          <router-link to="/vip/saveName" class="clearfix">
          <div>姓名</div>
          <div>大件会</div>
          </router-link>
        </li>
        <li>
          <div>小区</div>
          <div>华锦花园</div>
        </li>
        <li>
          <div>出生年月</div>
          <div>1990-01-01</div>
        </li>
        <li>
          <div>我的收货地址</div>
          <div class="right-arrow"></div>
        </li>
      </ul>
  </div>
</template>
<script>
</script>
<style scoped lang="less">
.vipInfo-container {
  padding: 15/37.5rem 31/37.5rem 0 31/37.5rem;
  text-align: left;
  font-size: 28/37.5rem;
  ul {
    li {
      border-bottom: 1px solid #eee;
      height: 96/37.5rem;
      line-height: 96/37.5rem;
      box-sizing: border-box;
      position: relative;
      :last-child {
        border-bottom: 0;
      }
      div:first-child {
        float: left;
        height: 80/37.5rem;
        color: #888;
      }
      div:last-child {
        float: right;
        .profile {
          display: block;
          width: 80/37.5rem;
          height: 80/37.5rem;
          background-size: cover;
          overflow: hidden;
          background-position: center center;
          background-image: url(../../assets/images/vip/morentouxiang.png);
        }
      }
      .right-arrow {
        display: inline-block;
        width: 10/37.5rem;
        height: 18/37.5rem;
        background: url(../../assets/images/vip/fanhui@2x.png) no-repeat;
        background-size: contain;
        position: absolute;
        top: 39/37.5rem;
        right: 0;
      }
    }
  }
}
.img2x(name) {
  //less的函数应用后面
  background-image: url(`${name}2x.png`);
}
@media (min-device-pixel-ratio: 1.5) {
  //iphone的ratio屏的2倍图
}
@media (min-device-pixel-ratio: 2) {
  //iphone的ratio屏的3倍图
}
</style>
